<template>
	<section>
        <el-row class="app-container">
            <el-row>
				<el-row>
					<el-col :span="20">
						<i class="el-icon-s-opportunity icon1"></i>
						<span style="color:#333; font-size:16px">流程:创建 - 上级单位来文 - 创建</span>
					</el-col>
					<el-col :span="4">
						<div class="rightButton">
							<el-button type="primary" size="small" @click="addSubmit" :loading="load.add">提交</el-button>
							<!-- <el-button type="primary" size="small">保存</el-button> -->
						</div>
					</el-col>
				</el-row>
			</el-row>

            <el-tabs v-model="activeName">
                <el-tab-pane label="流程表单" name="first">
                    <el-col :span="24" style="color: rgb(216,34,37)">
						<h3 align="center">上级单位来文</h3>
                        <el-form class="redItem" ref="addForm" :model="addForm" :rules="addFormRules" label-width="100px" size="mini">
                            
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="来文机关:" prop="comeDeptname">
                                        <el-input readonly v-model="addForm.comeDeptname"  @focus="openFromSuperior" suffix-icon="el-icon-search"></el-input>
                                    </el-form-item>
                                </el-col>

                                <el-col :span="6">
                                    <el-form-item label="收文编号:" prop="receiveNumber">
                                        <el-input v-model="addForm.receiveNumber"></el-input>
                                    </el-form-item>
                                </el-col>

                                <el-col :span="6">
                                    <el-form-item label="字名:" prop="wordName">
                                        <el-select v-model="addForm.wordName" placeholder="请选择">
                                            <el-option
                                                v-for="item in docTopicOptions"
                                                :key="item.label"
                                                :label="item.label"
                                                :value="item.label">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>

                            </el-row>

                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="文件标题:" prop="docTitle">
                                        <el-input v-model="addForm.docTitle"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="文号:" prop="wenNumber">
                                        <el-input v-model="addForm.wenNumber"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="批办意见:">
                                        <el-input
                                            type="textarea"
                                            :rows="4"
                                            placeholder="请输入批办意见"
                                            disabled
                                            v-model="addForm.nibanOptions"
                                            >
                                        </el-input>
                                    </el-form-item>
                                </el-col>

                                <el-col :span="12">
                                    <el-form-item label="领导批示:">
                                        <el-input
                                            type="textarea"
                                            :rows="4"
                                            placeholder="请输入领导批示"
                                            disabled
                                            v-model="addForm.leaderComments"
                                            >
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="传阅范围:" prop="circulateMsg">
                                        <el-input readonly v-model="addForm.circulateMsg" @focus="openCirculateSelect" suffix-icon="el-icon-search"></el-input>
                                    </el-form-item>
                                </el-col>

                                <el-col :span="12">
                                    <el-form-item label="批示的领导:" prop="cleaderName">
                                        <el-input readonly v-model="addForm.cleaderName"  @focus="openCommentsLeaderSelect" suffix-icon="el-icon-search"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="收文部门:" prop="receiveDeptname">
                                        <el-input readonly v-model="addForm.receiveDeptname" @focus="openShouWenSelect" suffix-icon="el-icon-search"></el-input>
                                    </el-form-item>
                                </el-col>

                                <el-col :span="12">
                                    <el-form-item label="部门领导:" prop="dleaderName">
                                        <el-input readonly v-model="addForm.dleaderName"  @focus="openDeptLeaderSelect" suffix-icon="el-icon-search"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="8">
                                    <el-form-item label="收文日期:">
                                        <el-date-picker
                                            type="date"
                                            placeholder="选择日期"
                                            v-model="addForm.receiveDate"
                                            >
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>

                                <el-col :span="8">
                                    <el-form-item label="份数:" prop="copies">
                                        <el-input v-model="addForm.copies"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>



                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="正文" prop="archiveTitle">
                                        <el-input v-model="addForm.archiveTitle" @focus="openArchiveSelect" clearable></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="附件" prop="attachment">
                                        <!--附件上传插件 -->
                                        <div style="margin-left:28px; padding-bottom:10px">
                                            <attachment-upload 
                                                :archiveId="uploadArchiveId" 
                                                :categoryId="uploadCategoryId"
                                                :branchId="userInfo.branchId"
                                                @on-change="getUploadMsg"
                                                @on-remove="getRemoveMsg"
											></attachment-upload>
                                        </div>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </el-col>
                </el-tab-pane>

                <el-tab-pane label="流程图" name="second">
                </el-tab-pane>

                <el-tab-pane label="流程状态" name="third">
                </el-tab-pane>
            </el-tabs>

            
            <!--来文机关 ->部门选择组件-->
            <doc-archive-dept-select-components
                :showCheckbox="true"
                :branchId="userInfo.branchId"
                :defaultExpandAll="true"
                :isSingle="true"
                :checkedKeys="[addForm.comeDeptid]"
                @select-dept-node="getFromSuperiorMsg"
                ref="fromSuperiorSelect"
            ></doc-archive-dept-select-components>


            <!--收文部门 ->部门选择组件-->
            <doc-archive-dept-select-components
                :showCheckbox="true"
                :branchId="userInfo.branchId"
                :defaultExpandAll="true"
                :isSingle="true"
                :checkedKeys="[addForm.receiveDeptid]"
                @select-dept-node="getShouWenMsg"
                ref="shouWenSelect"
            ></doc-archive-dept-select-components>


            <!-- 批示的领导选择组件 -->
            <doc-archive-user-select-components
                :isSingleUser="true"
                @get-user-data="getCommentsLeaderMsg"
                ref="openCommentsLeaderSelect"
            ></doc-archive-user-select-components>


             <!-- 部门领导选择组件 -->
            <doc-archive-user-select-components
                :isSingleUser="true"
                @get-user-data="getDeptLeaderMsg"
                ref="openDeptLeaderSelect"
            ></doc-archive-user-select-components>

            <!-- 传阅范围选择组件 -->
            <doc-archive-user-select-components
                @get-user-data="getCirculateMsg"
                ref="openCirculateSelect"
                :isSingleUser="false"
            ></doc-archive-user-select-components>



            <!--正文选择主件 -->
            <archive-select-components @get-archive-data="getArchiveData" ref="openArchiveSelect">
            </archive-select-components>

        </el-row>
	</section>
</template>

<script>
	import util from '@/common/js/util';//全局公共库
	import Sticky from '@/components/Sticky' // 粘性header组件
	
    import { mapGetters } from 'vuex' 
    import DocArchiveDeptSelectComponents from '../docComponents/DocArchiveDeptSelectComponents';
	import DocArchiveUserSelectComponents from '../docComponents/DocArchiveUserSelectComponents';
    import {listDocWordName} from '@/api/mdp/arc/doc/docWordName';
    import {sn} from '@/common/js/sequence'; //id生成器
    import { addRegistration } from '@/api/mdp/arc/doc/docArchive';
    
    
	export default {
        inject:["reload"], 
		computed: {
		    ...mapGetters([
		        'userInfo'
		    ])
		},
		data() {
            var attachmentVal = (rule, value, callback) => {
                if(this.attachSize === 0) {
                    callback(new Error('附件不能为空'));
                }
                callback();
            };

			return {
				load:{ list: false, edit: false, del: false, add: false },//查询中...
				/**begin 自定义属性请在下面加 请加备注**/
                //默认选中
                activeName: "first",
                addForm: {
                    //来文机关ID
                    comeDeptid: '',
                    comeDeptname: '',
                    //收文编号
                    receiveNumber: '',
                    //文件标题
                    docTitle: '',
                    //文号
                    wenNumber: '',
                    //批示的领导id
                    cleaderId: '',
                    //批示的领导name
                    cleaderName: '',
                    //部门领导id
                    dleaderId: '',
                    //部门领导名称
                    dleaderName: '',
                    //收文部门id
                    receiveDeptid: '', 
                    //收文部门名称
                    receiveDeptname: '',
                    //收文日期
                    receiveDate: new Date(),  
                    //份数
                    copies: 1,
                    //正文id
                    archiveId: '',
                    //正文标题名
                    archiveTitle: '',
                    //当前机构号
                    branchId: '',
                    //传阅范围
                    circulateMsg: '',
                    wordName: '',
                    //拟办意见
                    nibanOptions: '',
                    //领导批示
                    leaderComments: '',

                },
                addFormRules: {
                    docTitle: [
						{ required: true, message: '文件标题不能为空', trigger: 'change' }
                    ],
                    attachment: [
                        { validator: attachmentVal, trigger: 'change' }
                    ]

                    
                },
                attachSize : 0,
                //紧急程度
                urgencyLevel: [],
                circulate: [],
				//上传组件必要参数
				uploadArchiveId: '',
				uploadCategoryId: '',
                docTopicOptions: [],
				/**end 自定义属性请在上面加 请加备注**/
			}
		},//end data
		methods: { 
			/**begin 自定义函数请在下面加**/
			addSubmit: function() {
                this.$refs.addForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => { 
							this.load.add=true
                            let params = Object.assign({}, this.transformData(this.addForm));
							addRegistration(params).then((res) => {
								this.load.add=false
								var tips=res.data.tips;
								if(tips.isOk){
									this.$refs['addForm'].resetFields();
									this.clearFormName();
                                    this.$emit('submit');//  @submit="afterAddSubmit"
                                    this.reload();
								}
								this.$message({ message: tips.msg, type: tips.isOk?'success':'error' }); 
							}).catch( err  => this.load.add=false);
						});
					}
				});
            },
            
            clearFormName() {
                this.circulate = [];
            },

            transformData(data) {
                data.docId = data.docId;
                data.wordName = data.wordName;
                data.branchId = this.userInfo.branchId;
                data.docCategory = 'sjdwlw'
                data.receiveDate = util.formatDate(data.receiveDate, "yyyy-MM-dd HH:mm:ss");
				let form={
                    docArchive: data,
                    docCirculates: this.circulate
				}
				return form;
			},

            //获取公共参数: urgencyLevel:紧急程度 , secrecyLevel: 保密级别
			getCommonData: function() {
				let params = [
					{categoryId:'all',itemCode:'urgencyLevel'},
				]
				listOption(params).then((res) => {
					this.urgencyLevel = res.data.data.urgencyLevel
				})
			},

            //获取签报人数据
            getUserMsg: function() {
                
            },

            //获取部门数据
            deptSelect: function() {

            },

            openDeptSelect: function() {
                this.$refs.openDeptSelect.openDialog();
            },

            openUserSelect: function() {
                this.$refs.openUserSelect.openDialog();
            },
            
            //开启选择正文dialog
			openArchiveSelect: function()  {
				this.$refs.openArchiveSelect.openDialog();
            },
            
            //获取正文的id和标题
			getArchiveData(data) {
                this.addForm.archiveTitle = data.archiveTitle;
				this.addForm.archiveId = data.archiveId;
            },
            
            //设置表单默认参数
            setFormDefaultParam() {
                this.addForm.comeDeptid = this.userInfo.deptid;
                this.addForm.comeDeptname = this.userInfo.deptName;
                this.addForm.receiveDeptid = this.userInfo.deptid;
                this.addForm.receiveDeptname = this.userInfo.deptName;
            },

            //开启来文机关弹窗
            openFromSuperior() {
                this.$refs.fromSuperiorSelect.openDialog();
            },

            //获取来文机关数据
            getFromSuperiorMsg(data) {
                this.addForm.comeDeptid = data[0].deptid;
                this.addForm.comeDeptname = data[0].deptName
            },

            //开启收文部门弹窗
            openShouWenSelect() {
                this.$refs.shouWenSelect.openDialog();
            },

            //获取收文机关数据
            getShouWenMsg(data) {
                this.addForm.receiveDeptid = data[0].deptid;
                this.addForm.receiveDeptname = data[0].deptName
            },

            //开启批示的领导选择组件
            openCommentsLeaderSelect() {
                 this.$refs.openCommentsLeaderSelect.openDialog();
            },

            //获取批示的领导选择数据
            getCommentsLeaderMsg(data) {
                this.addForm.cleaderId = data[0].userid;
                this.addForm.cleaderName = data[0].username
            },

            //开启部门领导选择组件
            openDeptLeaderSelect() {
                this.$refs.openDeptLeaderSelect.openDialog();
            },

            //获取部门领导选择数据
            getDeptLeaderMsg(data) {
                this.addForm.dleaderId = data[0].deptid;
                this.addForm.dleaderName = data[0].username;
            },  

            //开启传阅范围选择数据
            openCirculateSelect() {
                this.$refs.openCirculateSelect.openDialog();
            },

            //获取传阅范围数据
            getCirculateMsg (data) {
                if(data.length <= 0) return;
                let showMsg = '';
                data.forEach(d => {
                    let param = {
                        targetId: d.userid,
                        targetName: d.username,
                        targetType: 'user'
                    }
                    showMsg += d.username + ",";
                    this.circulate.push(param);
                })
                showMsg = showMsg.substring(0,showMsg.length-1)
                this.addForm.circulateMsg = showMsg;
            },

             //获取字名
			getWordName() {
				let params = {
					branchId: this.userInfo.branchId
				}
				listDocWordName(params).then((res) => {
					var tips=res.data.tips;
					if(tips.isOk){ 
						res.data.data.forEach(p => {
							let param = {
								label: p.wordName
							}
							this.docTopicOptions.push(param);
						})
					}else{
						this.$message({ message: tips.msg, type: 'error' });
					} 
				}).catch();
            },

            //获取上传信息
            getUploadMsg(file, fileList) {
                if(fileList.length > 0) {
                    this.attachSize = 1;
                }
            },

            getRemoveMsg(file, fileList) {
                if(fileList.length <= 0) {
                    this.attachSize = 0;
                }
            },



			/**end 自定义函数请在上面加**/
			
		},//end methods
		components: {  
            'doc-archive-dept-select-components': DocArchiveDeptSelectComponents,
            'doc-archive-user-select-components': DocArchiveUserSelectComponents,

		},
		mounted() { 
			this.$nextTick(() => {
                //获取公共数据
                this.getCommonData();
                this.getWordName();
            }); 
            this.setFormDefaultParam();
            //生成docId
			this.addForm.docId = sn();
			this.uploadArchiveId = this.addForm.docId;
			//生成docIdCategory
			this.uploadCategoryId = 'docArchive_upload'
		}
	}

</script>


<style >
.icon1 {
	font-size:24px;
	color: #409eff;
}

.rightButton {
	float: right;
}

.redItem .el-form-item__label {
	color: rgb(216,34,37);
	font-weight: normal;
}

.redItem .el-input {
	border: 1px red solid;
}

.redItem .el-textarea {
	border: 1px red solid;
}

</style>